<template>
  <div class="app-container">
    <div style="margin-bottom: 16px;">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item v-for="item in pageParent" :key="item.id">
          <el-button type="text" style="padding-bottom: 0px;" @click="goParent">{{ item.name }}</el-button>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 操作表单 -->
    <div class="op-form">
      <el-form :inline="formInline" class="demo-ruleForm">
        <div>
          <el-form-item label="状态" label-width="50px">
            <el-select placeholder="选择群状态" v-model="status">
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="起止时间">
            <div class="block">
              <!-- <span class="demonstration">起止时间</span> -->
              <el-date-picker
                v-model="dateTime"
                value-format="timestamp"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="类型" label-width="50px">
            <el-select placeholder="搜索类型" v-model="searchType">
              <el-option
                v-for="item in searchOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label label-width="80px">
            <el-input v-model="searchKey" placeholder="搜索关键词" style="width: 300px;">
              <el-button slot="append" icon="el-icon-search" @click="seachHandler">搜索</el-button>
            </el-input>
          </el-form-item>
          <el-form-item label label-width="80px">
            <el-tag effect="plain">筛选订单数量：{{ total }}条</el-tag>
          </el-form-item>
          <el-form-item label label-width="80px">
            <el-tag effect="plain">筛选交易总额：{{ totalRevenue }}元</el-tag>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <el-table
      :data="list"
      v-loading.body="loading"
      @sort-change="sortHandler"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" fixed="left" sortable="true" prop="id" label="ID" width="95">
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column label="用户" width="110" align="center">
        <template slot-scope="scope">
          <span>
            <el-tooltip placement="top" :content="scope.row.nickname">
              <el-button type="text" @click="showGroupFile(scope.row.nickname)">
                <img class="avatar-img" :src="scope.row.avatar" />
              </el-button>
            </el-tooltip>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="用户ID" width="110" align="center">
        <template slot-scope="scope">{{ scope.row.uid }}</template>
      </el-table-column>
      <el-table-column label="订单" width="320" align="center">
        <template slot-scope="scope">
          <div>
            <el-tag type="info">
              <el-tooltip placement="top" :content="scope.row.out_trade_no">
                <span
                  style="width: 100px; overflow: hidden; text-overflow:ellipse；"
                >{{ scope.row.out_trade_no }}</span>
              </el-tooltip>
            </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="金额" width="110" align="center">
        <template slot-scope="scope">
          <!-- <span v-if="scope.row.user_id == 1">系统</span> -->
          ¥ {{ scope.row.total_fee / 100 }}
        </template>
      </el-table-column>
      <el-table-column label="支付渠道" sortable="true" prop="file_count" width="100" align="center">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.pay_from == 1">小程序</el-tag>
          <el-tag v-else>网页</el-tag>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="状态" width="110" align="center">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.status == 1">已完成</el-tag>
          <el-tag type="danger" v-else>未完成</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" sortable="true" prop="create_time" label="创建订单时间" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span>{{ scope.row.create_time }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" sortable="true" prop="update_time" label="更新时间" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span>{{ scope.row.update_time }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 10px; margin-left: -10px;">
      <el-pagination
        ref="pagination"
        background
        :page-size="pageSize"
        :current-page="page"
        :pager-count="21"
        @current-change="pageChange"
        layout="prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { getList } from '@/api/order'
export default {
  data() {
    return {
      dateTime: "",
      usrId:'',
      formInline: true,
      list: [],
      loading: true,
      pageSize: 0,
      total: 0,
      executeQuery: false,
      pageParent: [
        {
          id: 0,
          name: '最顶级',
        }
      ],
      page: 1,
      searchKey: '',
      searchType: '0',
      status: '2',
      searchOptions: [
        {
          value: '0',
          label: '全部'
        },
        {
          value: '1',
          label: '用户名'
        },
        {
          value: '2',
          label: '订单号'
        },
        {
          value: '3',
          label: '用户id'
        },
      ],
      priceOptions: [
        {
          value: '0',
          label: '全部金额'
        },
        {
          value: '1',
          label: '¥99'
        },
        {
          value: '2',
          label: '¥29.9'
        },
        {
          value: '3',
          label: '¥9.9'
        },
        {
          value: '4',
          label: '¥2.9'
        },
        {
          value: '99',
          label: '¥0.01'
        }
      ],
      statusOptions: [
        {
          value: '0',
          label: '未完成'
        },
        {
          value: '1',
          label: '已完成'
        },
        {
          value: '2',
          label: '全部'
        },
      ],
      price: '0',
      osc: 'DESC',
      orderKey: 'id'
    }
  },
  watch: {
    executeQuery: function (nv, ov) {
      if (nv) {
        // 如果为true, 则执行查询
        this.fetchData()
      }
    }
  },
  computed: {
    disableBreadcrumbBtn(idx) {
      if (idx == this.pageParent.length - 1) {
        return true
      } else {
        return false
      }
    }
  },
  mounted() {
    // 初始化其它参数
    this.searchKey = ''
    this.searchType = '0',  // 显示全部
    this.osc = 'DESC'   //  降序
    this.orderKey = 'id'// 按id排序
    this.status = '2'   //  正常和删除混合
    this.page = 1       //  第一页
    this.pageParent[0].query = this.buildListQuery(0)
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.loading = true
      let query = this.buildListQuery()
      getList(query).then(res => {
        this.pageSize = res.page_size
        this.total = res.total
        this.loading = false
        this.executeQuery = false
        this.list = res.items
        this.total = res.total;
        this.totalRevenue = res.price.paySuccessTotal;
        // 更新分页器的内部当前页
        this.$refs.pagination.internalCurrentPage = this.page
      }).catch((err) => {
        this.loading = false
        this.executeQuery = false
      })
    },
    sortHandler(sortInfo) {
      this.orderKey = sortInfo.prop
      if (sortInfo.order === "descending") {
        this.osc = "DESC"
      } else {
        this.osc = "ASC"
      }
      this.executeQuery = true
    },
    pageChange(page) {
      this.page = page
      this.executeQuery = true
    },
    // 删除
    statusHandler() {
      setStatus(this.targetId).then(response => {
        this.fetchData()
        this.targetId = 0
        this.targetName = ''
        this.targetType = 0
        this.showDelDialog = false
      })
    },
    // 搜索
    seachHandler() {
      this.fetchData()
    },
    // 构建查询结构
    buildListQuery() {
      // 返回数据
      return {
        searchCreateTimeStart: this.dateTime ? this.dateTime[0] / 1000 : '',
        searchCreateTimeEnd: this.dateTime ? this.dateTime[1] / 1000 : '',
        name: this.searchType == 3 ? "" : this.searchKey,
        type: this.searchType == 3 ? 0 : this.searchType,
        userId: this.searchKey,
        orderKey: this.orderKey,
        osc: this.osc,
        price: this.price,
        page: this.page,
        status: this.status,
      }
    },
    goParent() {
      this.searchKey = ''
      this.status = '2'
      this.searchType = '0'
      this.fetchData()
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 5px;
}
.el-button--text {
  padding-top: 0px;
  color: #7c796e;
}
.op-form {
  background: #f5f9ff;
  border: 1px dashed #cccccc;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 0px;
}
.slider-container {
  background-color: #f5f9ff;
  border: 1px solid #dcdfe6;
  padding: 5px;
  border-radius: 10px;
  margin-bottom: 10px;
}
.el-form-item {
  margin-bottom: 10px;
}
.el-dialog__wrapper {
  .el-dialog {
    border-radius: 10px;
  }
}
</style>

